<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>公式设置</title>
    <link rel="stylesheet" href="/static/component/pear/css/pear.css"/>
    <script src="/static/component/layui/layui.js"></script>
    <script src="/static/component/pear/pear.js"></script>
    <script src="/static/component/pear/module/ruinuo/sortable.js"></script>
    <script src="/static/component/pear/module/ruinuo/xm-select.js"></script>
</head>
<body>
<div class="view_body">
    <form class="layui-form" action="">
        <div class="ruinuo_box">
            <div class="main-container layui-row layui-col-space10 form_top label_con">

                <div class="layui-col-xs12 layui-col-md12">
                    <label class="layui-form-label">模板属性</label>
                    <div class="layui-input-block">
                        <select name="type" lay-verify="required" lay-search="" lay-filter="tpl_sx"
                                class="rn_fieldstype layui-input fieldstype_select">
                            <option value="1">自定义</option>
                            <option value="2">图片</option>
                            <option value="3">图标</option>
                            <option value="4">链接</option>
                            <option value="6">附件</option>
                        </select>
                    </div>
                </div>
                <div class="layui-col-xs12 layui-col-md12">
                    <label class="layui-form-label">模板设置</label>
                    <div class="layui-input-block">
                        <textarea placeholder="" class="layui-textarea rn_list_tpl" name="tpl"
                                  style="height:300px;"></textarea>
                    </div>
                </div>


            </div>
        </div>

    </form>

</div>

<script>

    let $ = layui.jquery;
    let field='';
    layui.use(['form'], function () {
        init();
    })

    function init() {

        let Config = parent.layui.design_table.GetConfig();
        let current=Config.current || {};
        field=current.field || '';
        let tpl=current.tpl || '';
        $(".rn_list_tpl").val(tpl);
        layui.form.on('select(tpl_sx)', function (data) {
            let val = data.value;
            let html='';
            switch (Number(val)) {
                case 2:
                    html+='{{#  layui.each(layui.engine_table.SplitValue(d.' +field+ '), function(index, item){ }}\n';
                    html += '<div class="img_list">\n';
                    html += '<img src="{{= item}}">\n';
                    html += '</div>\n';
                    html+="{{#  }); }}";
                    break;
                case 3:
                    html+='<div class="ico_list">\n';
                    html+='<i class="ruinuo-icon {{= d.' +field+ '}}"></i>\n';
                    html+='</div>';
                    break;
                case 4:
                    html+='<div class="url_list">\n';
                    html+='<a class="layui-btn layui-btn-xs rnhref" title="{{= d.' +field+ '}}" href="{{= d.' +field+ '}}"><i class="layui-icon layui-icon-unlink"></i></a>\n';
                    html+='</div>\n';
                    break;
                case 5:
                    html+='<div class="status_list">\n';
                    html+='<sapn class="color_{{= d.' +field+ '}}">{{= d.' +field+ '}}</span>\n';
                    html+='</div>';
                    break;
                case 6:
                    html+='{{#  layui.each(layui.engine_table.SplitValue(d.' +field+ '), function(index, item){ }}\n';
                    html+='<div class="file_list">\n';
                    html+='<a class="layui-btn layui-btn-xs rnhref" title="{{= item}}" href="{{= item}}"><i class="layui-icon layui-icon-unlink"></i></a>\n';
                    html+='</div>\n';
                    html+="{{#  }); }}";
                    break;
            }
            $(".rn_list_tpl").val(html);
        })
    }

    function SendForm()
    {
        let html=$(".rn_list_tpl").val();
        return html;
    }

</script>
</body>
</html>

